<template>
  <dw-page-warpper>
    <dw-menu-datagrid-form
      v-model:activeFormData="formData"
      :columns="columns"
      :render-form-title="renderFormTitle"
      :data-grid-title="dataGridTitle"
      :edit-form-title-field="nameField"
      :get-page-http-config="getPageHttpConfig"
      :del-info-http-config="delInfoHttpConfig"
      :del-list-http-config="delListHttpConfig"
      :get-info-http-config="getInfoHttpConfig"
      :add-info-http-config="addInfoHttpConfig"
      :update-info-http-config="updateInfoHttpConfig"
    >
      <template #formSlot>
        <table class="dw-form-table">
          <tbody>
            <tr>
              <td class="dw-td-label"><span class="required">项目名称</span></td>
              <td>
                <el-form-item
                  prop="projectName"
                  :rules="[
                    {
                      required: true,
                      message: '项目名称不能为空',
                      trigger: 'blur',
                    },
                  ]"
                >
                  <el-input v-model="formData.projectName" placeholder="请输入项目名称..."></el-input>
                </el-form-item>
              </td>

              <td class="dw-td-label"><span class="required">项目负责人</span></td>
              <td>
                <el-form-item
                  prop="principalId"
                  :rules="[
                    {
                      required: true,
                      message: '项目负责人不能为空',
                      trigger: 'blur',
                    },
                  ]"
                >
                  <el-input v-model="formData.principalId" placeholder="请选择项目负责人..."></el-input>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="dw-td-label">省/市</td>
              <td></td>
              <td class="dw-td-label">地图提示</td>
              <td>
                <el-switch v-model="formData.tipFlag" :active-value="1" :inactive-value="0"></el-switch>
              </td>
            </tr>
            <tr>
              <td class="dw-td-label">经度</td>
              <td></td>
              <td class="dw-td-label">维度</td>
              <td></td>
            </tr>
            <tr>
              <td class="dw-td-label">项目说明</td>
              <td :colspan="3">
                <el-form-item prop="projectMemo">
                  <el-input v-model="formData.projectMemo" maxlength="250" placeholder="请输入项目介绍信息..." show-word-limit type="textarea" />
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="dw-td-label">排序号</td>
              <td :colspan="3">
                <el-input-number v-model="formData.sortNo" />
              </td>
            </tr>
          </tbody>
        </table>
      </template>
    </dw-menu-datagrid-form>
  </dw-page-warpper>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import type { IColumn, IDelInfoHttpConfig, IDelListHttpConfig, IGetPageHttpConfig, IUpdateInfoHttpConfig, IAddInfoHttpConfig, IHttpConfig, IGetInfoHttpConfig } from '@/types/menu-datagrid-form';

import type { IProject } from './project';

defineOptions({
  name: 'sysProject',
});
const formData = ref<IProject>({
  id: '',
  projectName: '',
  principalId: '',
  provinceId: '',
  cityId: '',
  longitude: '',
  latitude: '',
  tipFlag: 1,
  projectMemo: '',
});
const dataGridTitle = '项目列表';
const renderFormTitle = (stateValue: 'add' | 'edit', data: IProject): string => {
  if (stateValue === 'add') {
    return '项目信息';
  } else {
    return data.projectName;
  }
};
const nameField = 'projectName';
const columns = ref<IColumn[]>([
  {
    prop: 'projectName',
    label: '项目名称',
    width: 200,
    align: 'left',
  },
  {
    prop: 'projectMemo',
    label: '项目介绍',
  },
  {
    prop: 'sortNo',
    label: '排序',
    align: 'right',
    width: 100,
  },
]);
const delInfoHttpConfig: IDelInfoHttpConfig = {
  url: '/admin-api/sys/project/#{id}',
  delInfoMsgEmphasize: '#{projectName}',
};
const delListHttpConfig: IDelListHttpConfig = {
  url: '/admin-api/sys/project/list',
};

const getPageHttpConfig: IGetPageHttpConfig<IProject> = {
  url: '/admin-api/sys/project/page/list',
};
const getInfoHttpConfig: IGetInfoHttpConfig<IProject> = {
  url: '/admin-api/sys/project/#{id}',
};
const addInfoHttpConfig: IAddInfoHttpConfig<IProject> = {
  url: '/admin-api/sys/project',
};
const updateInfoHttpConfig: IUpdateInfoHttpConfig<IProject> = {
  url: '/admin-api/sys/project',
};
</script>
<style lang="scss" scoped></style>
